<template>
	<view class="shopBuyDetails-wrapper wrapperLayer">
		<titleBar :titleText='"店铺详情"'></titleBar>
		<view class="page-content-container borderBox colCen" v-if="pageInfo">
			<view class="shop-infomation-container rowCenBet">
				<view class="left-infomation">
					<view class="shoptitle">
						{{pageInfo.shopInfo.shopName}}
					</view>
					<view class="grade-category-container rowCen">
						<block v-for="(star,index) in 5" :key="index">
							<image class="star"
								v-if="(index+1)<(pageInfo.shopInfo.shopPower/10) || (index+1)==(pageInfo.shopInfo.shopPower/10)"
								src="../../static/images/community/redStar.png" mode=""></image>
							<image class="star"
								v-else-if="(index+1)>(pageInfo.shopInfo.shopPower/10) && (index+1 - (pageInfo.shopInfo.shopPower/10)<0.5)"
								src="../../static/images/community/harfstar.png" mode=""></image>
							<image class="star" v-else src="../../static/images/community/empstar.png" mode=""></image>
						</block>

						<view class="grade-num">
							{{Number(pageInfo.shopInfo.shopPower/10).toFixed(1)}}
						</view>

						<view class="cate-txt">
							{{pageInfo.shopInfo.cateName}}
						</view>
					</view>

					<view class="shopadrs">
						{{pageInfo.shopInfo.address}}
					</view>

					<view class="salenum-bar rowCen">
						<image class="fireIcon" src="../../static/images/community/fire.png" mode=""></image>
						<view class="salenum-txt">
							半年热销{{pageInfo.dealDetail.halfYearSale}}
						</view>
					</view>
				</view>
				<image class="shopImg" :src="pageInfo.dealBaseInfo.defaultPic" mode="aspectFill"></image>
			</view>


			<view class="step-container borderBox">
				<view class="container-title">
					省钱步骤
				</view>

				<view class="img-content borderBox">
					<image class="stepimg" src="https://hxshapp.oss-cn-beijing.aliyuncs.com/takeout/step.png" mode="">
					</image>
				</view>
			</view>

			<view class="list-title-bottom">
				优惠列表
			</view>

			<view class="bottom-list-container colCen">
				<block v-for="(items,index) in pageInfo.subset" :key="index">
					<view class="items-content rowCen borderBox" @tap="toMiniProgram(items)">
						<image class="items-pic" :src="items.dealBaseInfo.defaultPic" mode="aspectFill"></image>

						<view class="goods-info">
							<view class="gds-content">
								{{items.dealBaseInfo.dealTitle}}
							</view>

							<view class="oldprice">
								市场价￥￥{{Number(items.dealBaseInfo.marketPrice/100).toFixed(2)}}
							</view>

							<view class="nowprice">
								券后价￥{{(items.dealBaseInfo.finalPrice/100).toFixed(2)}}
							</view>
						</view>

						<view class="saveMoney-btn rowCen">
							领券省{{(items.dealBaseInfo.marketPrice/100-(items.dealBaseInfo.finalPrice/100)).toFixed(1)}}元
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				pageInfo: '',
				grade: 50,
				loadstate: 'loading'
			}
		},
		onLoad(options) {
			this.id = options.id
			this.initData()
		},
		methods: {
			initData() {
				this.$http.post('mttuangou/searchDeals', {
					shopIds: this.id
				}, 'application/json').then(res => {
					console.log("============="+JSON.stringify(res));
					this.pageInfo = res[0]
				})
			},
			toMiniProgram(item) {
				console.log(item);
				// 1拉起微信小程序    0 不拉
				var isAppletJump = getApp().globalData.appinfo.isAppletJump;
				console.log("===========")
				if (isAppletJump) {
					plus.share.getServices(function(res) {
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: 'gh_870576f3c6f9',
								type: 0, //0 正式 1 测试 2 体验  小程序的版本
								path: item.couponInfo.miniProgramUrl //这里你要跳的路径，可以传值
							});
						}
					}, function(res) {
						console.log(JSON.stringify(res));
					});
				} else {

					uni.navigateTo({
							url: '../webView/webView?url=' + encodeURIComponent(item.couponInfo.couponPageUrl)
						})

					}
				}
			}
		}
</script>

<style lang="scss">
	.shopBuyDetails-wrapper {
		width: 100%;

		.page-content-container {
			width: 100%;
			padding: 0 26rpx;
			margin-top: 20rpx;

			.shop-infomation-container {
				width: 100%;
				background: #FFFFFF;
				padding: 20rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.left-infomation {
					.shoptitle {
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.grade-category-container {
						margin: 15rpx 0;

						.star {
							width: 22rpx;
							height: 22rpx;
							margin-right: 5rpx;
						}

						.grade-num {
							margin-left: 15rpx;
							margin-right: 30rpx;
							font-size: 22rpx;
							font-weight: 500;
							color: #FF002C;
						}

						.cate-txt {
							font-size: 22rpx;
							font-weight: 500;
							color: #666666;
						}
					}

					.shopadrs {
						font-size: 24rpx;
						font-weight: 500;
						color: #666666;
					}

					.salenum-bar {
						margin-top: 15rpx;

						.fireIcon {
							width: 24rpx;
							height: 28rpx;
							margin-right: 10rpx;
						}

						.salenum-txt {
							font-size: 24rpx;
							font-weight: 500;
							color: #333333;
						}
					}
				}

				.shopImg {
					width: 164rpx;
					height: 164rpx;
					border-radius: 12rpx;
				}
			}

			.step-container {
				width: 100%;
				background: #FFFFFF;
				padding: 20rpx;
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.container-title {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.img-content {
					width: 100%;
					padding: 0 12rpx;
					margin-top: 25rpx;

					.stepimg {
						width: 100%;
						height: 140rpx;
					}
				}
			}

			.list-title-bottom {
				width: 100%;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;
			}

			.bottom-list-container {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				overflow: hidden;

				.items-content {
					width: 100%;
					height: 188rpx;
					background: #FFFFFF;
					padding: 0 20rpx;
					border-bottom: 1rpx solid #F8F8F8;

					.items-pic {
						width: 138rpx;
						height: 138rpx;
						margin-right: 20rpx;
					}

					.goods-info {
						width: 316rpx;

						.gds-content {
							font-size: 28rpx;
							font-weight: 500;
							color: #333333;
							width: 100%;
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.oldprice {
							font-size: 24rpx;
							font-weight: 500;
							text-decoration: line-through;
							color: #999999;
							margin: 15rpx 0;
						}

						.nowprice {
							font-size: 24rpx;
							font-weight: 500;
							color: #FF002C;
						}
					}

					.saveMoney-btn {
						height: 48rpx;
						background: #F03636;
						border-radius: 24rpx;
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						padding: 0 23rpx;
						margin-top: 60rpx;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
